<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>任务日志</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-form-item prop="name" label="名称">
              <el-input v-model="queryInfo.name" />
            </el-form-item>
            <el-form-item prop="groupCode" label="任务组">
              <el-input v-model="queryInfo.groupCode" />
            </el-form-item>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :page="page" @changePage="changePage">
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="groupCode" label="任务组" :formatter="(row: any) => jobGroups[row.groupCode]" />
            <el-table-column prop="execTime" label="执行时间" width="150" align="center"
              :formatter="(row: any) => $moment(row.execTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column prop="duration" label="任务历时" width="100" align="center"
              :formatter="(row: any) => $convertTimeUnit(row.duration)" />
            <el-table-column label="执行结果" width="80" align="center">
              <template #default="scope">
                <el-tag size="small" :type="scope.row.status == 1 ? 'success' : 'danger'">
                  {{ scope.row.status == 1 ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="执行信息" />
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import useTable from 'src/hooks/useTable'
import { $listDict, $convertTimeUnit, $moment } from 'src/hooks/useCommon'
import { pageJobLog } from 'src/api/monitor/jobLog'

const { page, initIndex } = useTable()

const jobGroups = ref<Array<any>>([])
jobGroups.value = $listDict('TASK_GROUP')

const queryInfo = reactive({
  name: '',
  groupCode: ''
})
const changePage = (pageNumber: number, pageSize: number) => {
  page.pageNumber = pageNumber
  page.pageSize = pageSize
  pageJobLog({ ...queryInfo, pageNumber, pageSize }).then(({ data }) => {
    page.data = data.list
    page.total = data.total
  })
}
const search = () => {
  changePage(1, 10)
}
search()
</script>

<style lang="scss" scoped>
</style>
